<template>
  <page-frame>
    <div class="visitorRecord">
      <div class="toptitle">
        <div class="left">来访登记</div>
        <div class="right">
          <div class="btns">
            <el-button @click="visitorRegistration" class="lightGreenBtn">访客登记</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row>
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="fileId" clearable @change="selectItem" @clear = "clearItem" placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId"
                    >
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item"   v-show="fileId=='1'">
                <el-date-picker v-model="queryData.visitTime" @change="query" placeholder="请选择来访时间" type="date" style="width:81%!important;">
                </el-date-picker>
              </div>
              <div class="input-item"   v-show="fileId=='2'">
                <el-input v-model="queryData.visitor"  @keyup.enter.native="query" placeholder="请输入访客姓名" style="width:81%!important;">
                </el-input>
              </div>
              <div class="input-item"   v-show="fileId=='3'">
                <el-select v-model="queryData.reason" @change="query"  placeholder="请选择来访类型" style="width:81%!important;">
                  <el-option
                    v-for="item in reasonOptions"
                    :label="item.label"
                    :value="item.label">
                  </el-option>
                </el-select>
              </div>
              <div class="input-item"   v-show="fileId=='4'">
                <el-input v-model="queryData.memberName"  @keyup.enter.native="query"  placeholder="请输入会员姓名" style="width:81%!important;">
                </el-input>
              </div>
              <div class="input-item"   v-show="fileId=='5'">
                <el-input v-model="queryData.receiver"  @keyup.enter.native="query"  placeholder="请输入陪同人" style="width:81%!important;">
                </el-input>
              </div>
            </el-col>
            <el-col :span="2" :offset="0">
              <div class="btns" style=" width:70%;">
                <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @cell-dblclick="detail"
            style="width: 100%">
            <el-table-column
              prop="visitTime"
              label="来访时间"
              width="170"
            >
            </el-table-column>
            <el-table-column
              prop="eLeaveTime"
              label="预计离开时间"
              width="170"
            >
            </el-table-column>
            <el-table-column
              prop="visitor"
              label="访客姓名"
            >
            </el-table-column>
            <el-table-column
              prop="contact"
              label="访客电话"
            >
            </el-table-column>
            <el-table-column
              prop="reason"
              label="来访类型"
            >
            </el-table-column>
            <el-table-column
              prop="memberName"
              label="会员姓名"
            >
            </el-table-column>
            <el-table-column
              prop="receiver"
              label="陪同人"
            >
            </el-table-column>
          </el-table>

          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import visitorRecordApi from '../../service/serCenter/visitorRecordApi';
  import commonJs from '../../config/common';
  export default {
    methods: {
      init(){
        this.loadTableData(10,1);
      },
      /**
       * 分页查询
       */
      loadTableData(pageSize,pageNum){
        if(this.queryData.visitTime!=''){
          let time = commonJs.formatDate(this.queryData.visitTime);
          this.queryData.visitTime = time.replace(/\-/g,' ');
        }
        visitorRecordApi.getTableData(pageSize,pageNum,this.queryData).then(
          (response)=>{
            this.tableData = response.data.data.list;
            this.total = response.data.data.total;
          }
        );
      },
      /**
       * 搜索
       */
      query(){
        this.loadTableData(10,1);
      },
      /**
       * 选择项目
       */
      selectItem(){
        //清空选项
        this.queryData.visitTime='';
        this.queryData.visitor='';
        this.queryData.reason='';
        this.queryData.memberName='';
        this.queryData.receiver='';
      },
      /**
       * 清空按钮触发
       */
      clearItem(){
        this.selectItem();
      },
      /**
       * 访客登记按钮
       */
      visitorRegistration(){
        this.$router.push({name: 'visterRegistration',params:{way:1,row:{}}});
      },
      /**
       * 详情
       */
      detail(row){
        this.$router.push({name: 'visterRegistration',params:{way:0,row:row,}});
      },
      /**
       * 分页相关
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData(this.pageSize,this.currentPage);
      },
    },
    mounted: function () {
      this.init();
    },
    data () {
      return {
        fileId:1,
        queryData:{
          visitTime:'',
          visitor:'',
          reason:'',
          memberName:'',
          receiver:'',
        },
        fileList:[{
          fileId: 1,
          fileName: "来访时间"
        },{
          fileId: 2,
          fileName: "访客姓名",
        },{
          fileId: 3,
          fileName: "来访类型",
        },{
          fileId: 4,
          fileName: "会员姓名",
        },{
          fileId: 5,
          fileName: "陪同人",
        }],
        reasonOptions:[{
          value: 0,
          label: '亲友探望'
        },{
          value: 1,
          label: '媒体采访'
        },{
          value: 2,
          label: '义工等团体'
        },{
          value: 3,
          label: '参观学习'
        },{
          value: 4,
          label: '上级视察'
        },{
          value: 5,
          label: '学生实践'
        },{
          value: 6,
          label: '其他'
        }],
        tableData: [],
        total:0,
        pageSize:10,
        currentPage:1,
      }
    },
  }
</script>
<style>

  .visitorRecord .input .btns{
    margin-top:0;
  }
  .visitorRecord .el-input{
    width: 80%;
  }
  .visitorRecord .input input{
    display: inline-block;
  }
  .visitorRecord .scroll{
    height: calc(100vh - 122px);
    padding:0px 50px;
  }
  .visitorRecord .el-pagination{
    margin-right:0!important;
    padding-right:0!important;
  }
  .visitorRecord .el-select {
    display: block;
    position: relative;
  }
</style>
